<script>
export default {
  data() {
    return {
      msg: "",
      showMsg: false,
    };
  },
  methods: {
    show(msg) {
      this.showMsg = true;
      this.msg = msg;
    },
    close() {
      this.showMsg = false;
      this.msg = "";
    },
  },
};
</script>

<template>
  <div class="msg" v-if="showMsg">
    <span>{{ msg }}</span>
    <button @click="close">X</button>
  </div>
</template>

<style scoped>
.msg {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 400px;
  height: 50px;
  position: fixed;
  z-index: 9999;
  left: 50%;
  margin-left: -200px;
  top: 150px;
  line-height: 50px;
  padding: 0 25px;
  border: 1px solid #e4e4e4;
  background: #f5f5f5;
  color: #ff0000;
  border-radius: 8px;
}
</style>
